iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

Vue菜鳥的自我學習days系列 第 37

37.use API with Axios

  • 分享至 

  • xImage
  •  

首先,我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。
我们首先创建一个 data 里的 property 以最终放置信息,然后将会在 mounted 生命周期钩子中获取数据并赋值过去,以比特幣時價API為例:https://api.coindesk.com/v1/bpi/currentprice.json

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    // 加入 try catch 檢查 api 狀態,並最後解除loading動畫
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
  // 會得到 get api response
})
// 用迴圈取出所有對應幣種及幣值
<div id="app">
  <h1>Bitcoin Price Index</h1>
  <div
    v-for="currency in info"
    class="currency"
  >
    {{ currency.description }}:
    <span class="lighten">
      <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </span>
  </div>
</div>
// 使用filter取值並四捨五入至小數點後2位
filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},

上一篇
36.Local Storage2
下一篇
38.vue.config.js
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
pzeroeighttwo0
iT邦新手 5 級 ‧ 2020-10-23 18:35:41

問個問題唷! 你目前的文章是 Vue 3 嗎?

0
pzeroeighttwo0
iT邦新手 5 級 ‧ 2020-10-23 18:38:12

為什麼後面幾篇的中文字都是簡體阿?

我要留言

立即登入留言